<template>
  <el-dialog
    :visible="showVisible"
    center
    :show-close="false"
    width="680px"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>提示</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="handleCancel"
        ></span>
      </div>
    </div>
    <div class="pr30 pl30">
      <span>{{ title }}</span>
      <el-table
        ref="table"
        class="mt20"
        :data="tableData"
        style="width: 100%"
        current-row-key="id"
        stripe
        border
        highlight-current-row
      >
        <el-table-column prop="key" label="业务模型">
          <template slot-scope="scope">
            {{ scope.row.modelName + '(' + scope.row.modelCode + ')' }}
          </template>
        </el-table-column>
        <el-table-column label="验证规则">
          <template slot-scope="scope">
            <p v-for="(rule, index) in scope.row.validationRules" :key="index">
              {{ `${rule.ruleName}(${rule.ruleCode})` }}
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div slot="footer" class="tr">
      <el-button type="primary" @click="handleCancel">关 闭</el-button>
    </div>

  </el-dialog>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      showVisible: false,
      title: '',
      tableData: []
    }
  },

  created () {
  },

  methods: {
    init (record = {}) {
      this.showVisible = true
      this.title = record.title
      this.tableData = record.details
    },
    handleCancel() {
      this.showVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
